<!-- 此模块是数据权限定制化树结构 子树 -->
<template>
  <div id="sub-tree" :class="[isDetail? 'cover': '']">
    <div class="cover-layer"></div>
    <el-tree
      ref="tree"
      show-checkbox
      :data="treeData"
      node-key="id"
      :expand-on-click-node="false"
      :default-expand-all="true"
      :props="defaultProps"
      :default-checked-keys="permissionList"
      :empty-text="emptyText"
      :check-on-click-node="true"
      :check-strictly="checkStrictly"
      :key="checkStrictly"
      @check="checkChange"
    >
      <span class="custom-tree-node" slot-scope="{ node }">
        <span class="mr30">{{ node.label }}</span>
      </span>
    </el-tree>
  </div>
</template>
<script>
// import cloneDeep from 'lodash.clonedeep'
export default {
  name: "tree",
  props: {
    treeData: {
      type: Array,
      default: () => []
    },
    permissionList: {
      type: Array,
      default: () => []
    },
    checkStrictly: {
      type: Boolean,
      default: false
    },
    isLoading: {
      type: Boolean,
      default: false
    },
    checkFn: {
      type: Function,
      defualt: () => {}
    },
    route: {
      type: String,
      default: ""
    },
    dimension: {
      type: String,
      default: ""
    },
    pageType: {
      type: String,
      default: "add"
    }
  },
  data() {
    return {
      value: [],
      ids: [],
      emptyText: '', // 空文本文案
      defaultProps: {
        label: "name"
      }
    };
  },
  watch: {
    treeData(val) {
      !val?.length && !this.isLoading && (this.emptyText = '暂无数据');
    },
    isLoading(val) {
      val && (this.emptyText = '')
    }
  },
  computed: {
    isDetail() {
      return this.pageType === "view";
    }
  },
  methods: {
    checkChange(currentData, treeTarget) {
      this.checkFn(treeTarget, this.route, this.dimension)
    }
  }
};
</script>
<style lang="less" scoped>
#sub-tree.cover {
  .cover-layer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
  }
  /deep/ .is-checked {
    .el-checkbox__inner {
      background: #ddd;
      border-color: #ddd;
    }
  }
}
</style>
